import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ReuseTabService } from '@delon/abc';
import { environment } from '../../../../../environments/environment';
import { TableComponent } from './table.component';
declare const echarts: any;

@Component({
    selector: 'app-tctjstatistics',
    templateUrl: './tctj_statistics.component.html',
    styleUrls: ['./tctj_statistics.component.less']
})

export class TctjStatisticsComponent implements OnInit {
    @ViewChild('tab', { static: true }) tab: TableComponent;
    queryParam: any = {};
    headData = [];
    plainData = [];
    apiUrl: any = {};
    tableData: any = [];
    operaList: any = [
        { detailModal: false }
    ];
    tempData = [];
    colLeft = '0';
    colRight = '24';

    constructor(
        private activatedRoute: ActivatedRoute,
        private reuseTabService: ReuseTabService
    ) { }

    ngOnInit() {
        this.activatedRoute.queryParams.subscribe(param => {
            Object.assign(this.queryParam, param);
            this.apiUrl.query = environment.project + '/skywinStat';
            this.apiUrl.detail = this.apiUrl.query + '/monthStatDetail';

            const name = [];
            const count = [];
            const finish = [];
            const unfinish = [];
            const option = {
                color: ['#3ba0cc', '#70d4cd', '#66db87'],
                legend: { data: [] },
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                grid: { left: '30px', right: '30px', top: '30px', bottom: '0', containLabel: true },
                xAxis: [{ type: 'category', data: name }],
                yAxis: [{ type: 'value' }],
                series: []
            };

            switch (this.queryParam.type) {
                case 'line':
                    this.reuseTabService.title = '天窗月度按线别统计';
                    this.headData = [
                        { "name": "线别名称", "width": "" },
                        { "name": "计划总数", "width": "15%" },
                        { "name": "兑现数", "width": "15%" },
                        { "name": "兑现率", "width": "15%" },
                        { "name": "未兑现数", "width": "15%" }
                    ];
                    this.plainData = ["line", "planCount", "planFinish", "planFinishRate", "planUnfinish"];
                    this.apiUrl.query += '/monthStatByLine';
                    this.formatData(this.apiUrl.query, '&monthStr=' + param.month, (data) => {
                        for (const item of data) {
                            name.push(item.line);
                            finish.push(item.planFinish);
                            unfinish.push(item.planUnfinish);
                        }
                        option.legend.data = ['兑现数', '未兑现数'];
                        option.series = [
                            { name: '兑现数', type: 'bar', data: finish, label: { normal: { show: true, position: 'top' } } },
                            { name: '未兑现数', type: 'bar', data: unfinish, label: { normal: { show: true, position: 'top' } } }
                        ];
                        echarts.init(document.getElementById('statistics')).setOption(option);
                    });
                    break;
                case 'org':
                    this.reuseTabService.title = '天窗月度按车间统计';
                    this.headData = [
                        { "name": "车间名称", "width": "15%" },
                        { "name": "计划总数", "width": "15%" },
                        { "name": "兑现数", "width": "15%" },
                        { "name": "兑现率", "width": "15%" },
                        { "name": "未兑现数", "width": "15%" },
                        { "name": "未兑现原因", "width": "" }
                    ];
                    this.plainData = ["orgName", "planCount", "planFinish", "planFinishRate", "planUnfinish", "primaryCount"];
                    this.apiUrl.query += '/monthStatByOrg';
                    this.formatData(this.apiUrl.query, '&monthStr=' + param.month, (data) => {
                        for (const item of data) {
                            name.push(item.orgName);
                            finish.push(item.planFinish);
                            unfinish.push(item.planUnfinish);
                        }
                        option.legend.data = ['兑现数', '未兑现数'];
                        option.series = [
                            { name: '兑现数', type: 'bar', data: finish, label: { normal: { show: true, position: 'top' } } },
                            { name: '未兑现数', type: 'bar', data: unfinish, label: { normal: { show: true, position: 'top' } } }
                        ];
                        echarts.init(document.getElementById('statistics')).setOption(option);
                    });
                    break;
                case 'primary':
                    this.colLeft = '6';
                    this.colRight = '18';
                    this.reuseTabService.title = '天窗月度按提报主体统计';
                    this.headData = [
                        { "name": "主体名称", "width": "" },
                        { "name": "批复一体化计划", "width": "18%" },
                        { "name": "主体提报", "width": "18%" },
                        { "name": "非主体提报", "width": "18%" }
                    ];
                    this.plainData = ["orgName", "planCount", "primaryCount", "assistCount"];
                    this.apiUrl.query += '/monthStatByPrimary';
                    this.formatData(this.apiUrl.query, '&monthStr=' + param.month, (data) => {
                        for (const item of data) {
                            name.push(item.orgName);
                            count.push(item.planCount);
                            finish.push(item.primaryCount);
                            unfinish.push(item.assistCount);
                        }
                        option.legend.data = ['批复一体化计划', '主体提报', '非主体提报'];
                        option.series = [
                            { name: '批复一体化计划', type: 'bar', data: count, label: { normal: { show: true, position: 'top' } } },
                            { name: '主体提报', type: 'bar', data: finish, label: { normal: { show: true, position: 'top' } } },
                            { name: '非主体提报', type: 'bar', data: unfinish, label: { normal: { show: true, position: 'top' } } }
                        ];
                        echarts.init(document.getElementById('statistics')).setOption(option);
                    });
                    break;
                case 'level':
                    this.reuseTabService.title = '维修级别统计';
                    this.headData = [
                        { "name": "等级", "width": "" },
                        { "name": "计划总数", "width": "15%" },
                        { "name": "兑现数", "width": "15%" },
                        { "name": "兑现率", "width": "15%" },
                        { "name": "未兑现数", "width": "15%" }
                    ];
                    this.plainData = ["level", "planCount", "planFinish", "planFinishRate", "planUnfinish"];
                    this.apiUrl.query += '/monthStatByLevel';
                    this.formatData(this.apiUrl.query, '&monthStr=' + param.month, (data) => {
                        for (const item of data) {
                            name.push(item.level);
                            finish.push(item.planFinish);
                            unfinish.push(item.planUnfinish);
                        }
                        option.legend.data = ['兑现数', '未兑现数'];
                        option.series = [
                            { name: '兑现数', type: 'bar', data: finish, label: { normal: { show: true, position: 'top' } } },
                            { name: '未兑现数', type: 'bar', data: unfinish, label: { normal: { show: true, position: 'top' } } }
                        ];
                        echarts.init(document.getElementById('statistics')).setOption(option);
                    });
                    break;
                case 'win':
                    this.reuseTabService.title = '天窗类型统计';
                    this.headData = [
                        { "name": "类型", "width": "" },
                        { "name": "线别", "width": "15%" },
                        { "name": "计划总数", "width": "15%" },
                        { "name": "兑现数", "width": "15%" },
                        { "name": "兑现率", "width": "15%" },
                        { "name": "未兑现数", "width": "15%" }
                    ];
                    this.plainData = ["skyTypeName", "line", "planCount", "planFinish", "planFinishRate", "planUnfinish"];
                    this.apiUrl.query += '/monthStatBySkyType';
                    this.formatData(this.apiUrl.query, '&monthStr=' + param.month, (data) => {
                        option.xAxis[0].data = ['垂直天窗', 'V行天窗', '协议修天窗'];
                        for (const item of data) {
                            if (item.line === '总计') {
                                finish.push(item.planFinish);
                                unfinish.push(item.planUnfinish);
                            }
                        }
                        option.legend.data = ['兑现数', '未兑现数'];
                        option.series = [
                            { name: '兑现数', type: 'bar', data: finish, label: { normal: { show: true, position: 'top' } } },
                            { name: '未兑现数', type: 'bar', data: unfinish, label: { normal: { show: true, position: 'top' } } }
                        ];
                        echarts.init(document.getElementById('statistics')).setOption(option);
                    });
                    break;
            }
        });
    }
    formatData(url, param, callback?) {
        this.tab.loadList(url, param, (data) => {
            const edata: any = [];
            Object.assign(edata, data);
            edata.length = edata.length - 1;
            callback(edata)
        });
    }
    detail(e) {
        this.tempData = e;
        this.modalShow('detailModal');
    }
    modalShow(type) {
        this.operaList[type] = true;
    }
    modalHide(type) {
        this.operaList[type] = false;
    }
}
